<template>
  <div class="typefr">
    <ul>
      <li v-for="(item, index) in prolist" :key="index">
        <div class="main">
         <div class="left">
            <img :src="item.pro_img" />
         </div>
        <div class="right">
          <p>{{item.pro_title}}</p>
          <div class="m">
            <p class="red">￥{{item.pro_price}}
              <del class="a">￥{{item.pro_oldprice}}</del>
            </p>
            <button @click.prevent="goCar(item.pro_id)">加入购物车</button></div>
          </div>
          
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import {fapi1} from '@/assets/js/farmapi.js'
export default {

  props: ["prolist"],
  methods: {
     goCar(pro_id) {

      if (!localStorage.getItem("islogin")) {
        this.$router.push("/login");
      } else {
        // alert(localStorage.getItem("islogin"))
        let data = {
          pro_id: pro_id,
          userId: localStorage.getItem("islogin"),
          pro_num: 1,
        };
       fapi1("api/joincar",data).then((r) => {
          // console.log(r)
        })
      }
    },
  },
};
</script>
<style lang="less" scoped>
.typefr {
  img {
    width: 200px;
  }
}
.main{
  display: flex;
}
.m{
  display: flex;
  margin-top: 30px;
   button {
   
    height: 60px;
    width:160px ;
    background-color: #03a19c;
    color: #fff;
    border-radius:25px ;
    margin-left: 30px;
    
  }
}
.red{
  color: rgb(255, 0, 0);
  font-weight:700 ;
  font-size: 30px;
  margin-top: 10px;
  width: 88px;
}
.red .a{
color: rgb(205, 205, 205);
}
</style>